import React, {useEffect} from 'react';
import {Space, Table,Tooltip,Button,Switch} from "antd";
import {FormOutlined,DeleteOutlined} from "@ant-design/icons";
import {useAppDispatch} from "@/hooks";
import {changeStateById, getHospitalSetAsync, getHospitalSetLockIdAsync, useSelectorHosp} from "@/store/slice/hosp";
import {useSelectorCommon} from "@/store/slice/common";

function HospitalSet() {
    const dispatch = useAppDispatch();
    const {hospSetList} = useSelectorHosp();
    const {pageInfo,loading} = useSelectorCommon();
    useEffect(() => {
        dispatch(getHospitalSetAsync(1, 5));
    }, []);
    return (
        <div>
            {/*<div style={{marginBottom: 16}}>*/}
            {/*    <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>*/}
            {/*        Reload*/}
            {/*    </Button>*/}
            {/*    <span style={{marginLeft: 8}}>*/}
            {/*      {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}*/}
            {/*    </span>*/}
            {/*</div>*/}
            <Table
                loading={loading}
                pagination={{
                    ...pageInfo,
                    onChange(page,pageSize){
                        // console.log(page,pageSize);
                        dispatch(getHospitalSetAsync(page,pageSize));
                    }
                }}
                // rowSelection={rowSelection}
                rowKey={"id"}
                /*增加表格边框*/
                bordered={true}
                scroll={{x:1800}}
                columns={[
                    {
                        title:"序号",
                        width:70,
                        align:"center",// 居中
                        // dataIndex:"id",
                        // 第一个参数：如果没有设置dataIdex,那么值为该行信息
                        render(value,rows,index){
                            // console.log(value,rows,index);
                            return (pageInfo.current-1)*pageInfo.pageSize+ index+1;
                        }
                    },{
                        title:"医院名称",
                        align:"center",
                        width:200,
                        ellipsis:true,// 超过宽度将自动省略
                        dataIndex:"hosname"
                    },{
                        title:"医院编号",
                        align:"center",
                        dataIndex:"hoscode"
                    },{
                        title:"是否锁定",
                        align:"center",
                        // 0：锁定 1：未锁定
                        dataIndex:"status",
                        render(status,rows){
                            return (
                                <Switch checked={status===0} onChange={()=>{
                                    // dispatch(changeStateById(rows.id))
                                    dispatch(getHospitalSetLockIdAsync(rows.id,status));
                                }} />
                            )
                        }
                    },{
                        title:"api基础地址",
                        align:"center",
                        dataIndex:"apiUrl"
                    },{
                        title:"密钥",
                        align:"center",
                        width:150,
                        ellipsis:true,// 超过宽度将自动省略
                        dataIndex:"signKey"
                    },{
                        title:"联系人姓名",
                        align:"center",
                        dataIndex:"contactsName"
                    },{
                        title:"联系人手机",
                        align:"center",
                        dataIndex:"contactsPhone"
                    },{
                        title:"添加时间",
                        align:"center",
                        dataIndex:"createTime"
                    },{
                        title:"更新时间",
                        align:"center",
                        dataIndex:"updateTime"
                    },{
                        title:"操作",
                        align:"center",
                        dataIndex:"hosname",
                        fixed:"right",// 右浮动
                        render(){
                            return (
                                <Space>
                                    <Tooltip title="编辑">
                                        <Button type="primary" shape="circle" icon={<FormOutlined />} />
                                    </Tooltip>

                                    <Tooltip title="删除">
                                        <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} />
                                    </Tooltip>
                                </Space>
                            )
                        }
                    }
                ]}
                dataSource={hospSetList}/>
        </div>
    );
}

export default HospitalSet;